<template>
  <div>
    <div style="font-size: 20px; color: #333333;text-align: center;margin-top: -30px;margin-bottom: 30px;">
      实名认证
    </div>
    <div style="padding: 0 20px">
      <el-input v-model="name" placeholder="请输入姓名">
      </el-input>
      <el-input v-model="idcard" placeholder="请输入身份证号" style="margin-top: 30px;">
      </el-input>
      <div class="btnRR" @click="idCardVerify">立即认证</div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "idCardVerify",
    props: {},
    data() {
      return {
        name: "",
        idcard: '',
      };
    },

    mounted() {

    },

    watch: {

    },
    computed: {

    },
    methods: {
      async idCardVerify() {
        if(!this.name){
          this.$message('请输入姓名')
          return;
        }
        if(!this.idcard){
          this.$message('请输入身份证号')
          return;
        }
        let res = await this.$API.system.idCardVerify({
          idCard: this.idcard,
          name: this.name
        })
        if (res.code == 200) {
          this.$message.success('认证成功')
          this.$emit("successPay");
        } else {
          this.$message.error(res.msg || '认证失败')
        }
      }
    },
    created() {},
  };
</script>
<style lang="scss" scoped>
  .btnRR {
    margin-top: 40px;
    // width: 300px;
    width: 100%;
    height: 46px;
    border-radius: 5px;
    background: rgba(255, 104, 178, 0.698);

    font-size: 18px;
    color: #FFFFFF;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
</style>
